/*****************/
/* VERSION 0.1.9 */
/*****************/

@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

@namespace html url("http://www.w3.org/1999/xhtml");

$firefox-safari-style-show-favicons-in-tabs: true;
$firefox-safari-style-grayscale-favicons-in-tabs: false;
$firefox-safari-style-grayscale-extension-buttons-in-toolbar: true;

/*****************/
/* DEFAULT THEME */
/*****************/

:root {
    --firefox-safari-style-attention-color: #0a84ff;
    --firefox-safari-style-outline-color: -moz-mac-focusring;

    --firefox-safari-style-controls-width: 75px;

    --firefox-safari-style-inactive: #f6f6f6;

    /* Border colors */
    --firefox-safari-style-title-border-color-active: #aaaaaa;
    --firefox-safari-style-title-border-color-inactive: #dbdbdb;

    /******************/
    /* NAVIGATION BAR */
    /******************/

    /* Default Background color (gradiant) */
    --firefox-safari-style-bar-background-color-top: #e3e4e4;
    --firefox-safari-style-bar-background-color-bottom: #d4d5d5;
    /* Background color for private windows */
    --firefox-safari-style-bar-background-color-private: #26003f;
    /* Background color for inactive windows */
    --firefox-safari-style-bar-background-color-inactive: var(--firefox-safari-style-inactive);

    /* Max height of navigation bar */
    --firefox-safari-style-bar-height: 38px;

    /* Border colors */
    --firefox-safari-style-bar-border-color-active: #c1c2c2;
    --firefox-safari-style-bar-border-color-inactive: #dfdfdf;

    /********/
    /* TABS */
    /********/

    /* Max height of a tab */
    --firefox-safari-style-tab-height: 25px;

    /* Default background color (gradiant) */
    --firefox-safari-style-tab-background-color-top: #bdbebe;
    --firefox-safari-style-tab-background-color-bottom: #b5b6b6;
    /* Background active tab (gradiant) */
    --firefox-safari-style-tab-background-color-selected-top: #d4d5d5;
    --firefox-safari-style-tab-background-color-selected-bottom: #cacbcb;
    /* Background inactive tab */
    --firefox-safari-style-tab-background-color-inactive: var(--firefox-safari-style-inactive);
    /* Button background hover on incative tab */
    --firefox-safari-style-tab-background-color-hover: #afafaf;
    /* Icon size of favicon, throbber, sound etc. */
    --firefox-safari-style-button-icon: 12px;

    /* Border colors */
    --firefox-safari-style-tab-border-color-active: #afb0b0;
    --firefox-safari-style-tab-border-color-inactive: #dbdbdb;

    /* Colors e.g. for tabs or bookmarks */
    --firefox-safari-style-tab-color: hsl(240, 5%, 5%);
    --firefox-safari-style-tab-hover-color: #ffffff;
    --firefox-safari-style-tab-hover-background: #acadad;

    /********************/
    /* BUTTONS (URLBAR) */
    /********************/

    /* Button default size */
    --firefox-safari-style-button-width: 38px;
    --firefox-safari-style-button-height: 24px;
    /* Button background */
    --firefox-safari-style-button-background-active: white;
    --firefox-safari-style-button-background-inactive: var(--firefox-safari-style-inactive);
    /* Border color of buttons and urlbar */
    --firefox-safari-style-button-border-color: #cccccc;
    --firefox-safari-style-button-border-color-top: #cccccc;
    --firefox-safari-style-button-border-color-bottom: #b4b4b4;
    --firefox-safari-style-button-border-color-inactive: #c0c0c0;
    /* Font and icon color of buttons and urlbar */
    --firefox-safari-style-button-color: #5f5f5f;

    --tab-min-height: var(--firefox-safari-style-tab-height) !important;
    --space-above-tabbar: 0 !important;
    --toolbarbutton-vertical-text-padding: 4px !important;
}

/**************/
/* DARK THEME */
/**************/

:root:-moz-lwtheme-brighttext {

    --firefox-safari-style-inactive: #30292e;

    /* Border colors */
    --firefox-safari-style-title-border-color-active: #1b1b1b;
    --firefox-safari-style-title-border-color-inactive: 1b1b1b;

    /******************/
    /* NAVIGATION BAR */
    /******************/

    /* Default Background color (gradiant) */
    --firefox-safari-style-bar-background-color-top: #3d393e;
    --firefox-safari-style-bar-background-color-bottom: #363237;
    /* Background color for private windows */
    --firefox-safari-style-bar-background-color-private: #26003f;
    /* Background color for inactive windows */
    --firefox-safari-style-bar-background-color-inactive: #322b32;

    /* Border colors */
    --firefox-safari-style-bar-border-color-active: #575255;
    --firefox-safari-style-bar-border-color-inactive: #4e474d;

    /********/
    /* TABS */
    /********/

    /* Default background color (gradiant) */
    --firefox-safari-style-tab-background-color-top: #181618;
    --firefox-safari-style-tab-background-color-bottom: #181618;
    /* Background active tab (gradiant) */
    --firefox-safari-style-tab-background-color-selected-top: #343034;
    --firefox-safari-style-tab-background-color-selected-bottom: #302c2f;
    /* Background inactive tab */
    --firefox-safari-style-tab-background-color-inactive: var(--firefox-safari-style-inactive);
    /* Button background hover on incative tab */
    --firefox-safari-style-tab-background-color-hover: #181618;

    /* Border colors */
    --firefox-safari-style-tab-border-color-active: #575255;
    --firefox-safari-style-tab-border-color-inactive: #4e474d;

    /* Colors e.g. for tabs or bookmarks */
    --firefox-safari-style-tab-color: #9b999b;
    --firefox-safari-style-tab-hover-color: #ffffff;
    --firefox-safari-style-tab-hover-background: #656164;

    /********************/
    /* BUTTONS (URLBAR) */
    /********************/

    /* Button background */
    --firefox-safari-style-button-background-active: #615f63;
    --firefox-safari-style-button-background-inactive: var(--firefox-safari-style-inactive);
    /* Border color of buttons and urlbar */
    --firefox-safari-style-button-border-color: #6a6368;
    --firefox-safari-style-button-border-color-top: #7e767c;
    @media
    only screen and (   min--moz-device-pixel-ratio: 1.01),
    only screen and (		min-device-pixel-ratio: 1.01),
    only screen and (				min-resolution: 120dpi),
    only screen and (				min-resolution: 1.3dppx) {
        --firefox-safari-style-button-border-color-top: #737174;
    }
    --firefox-safari-style-button-border-color-bottom: #6a6368;
    --firefox-safari-style-button-border-color-inactive: #6a6368;
    /* Font and icon color of buttons and urlbar */
    --firefox-safari-style-button-color: #ffffff;
}

@media (-moz-mac-yosemite-theme) {
    /*-moz-appearance: -moz-mac-vibrant-titlebar-light !important;*/
    #mainPopupSet {
        #pageActionActivatedActionPanel, 
        #pageActionPanel, 
        #editBookmarkPanel, 
        .browser-extension-panel,
        #widget-overflow,
        #downloadsPanel,
        #appMenu-popup,
        > panel {
            margin-top: 2px !important;
        }
        #editBookmarkPanel .panel-arrow {
            transform: translateX(-4px);
        }
        .panel-arrowcontent {
            box-shadow: none !important;
        }
    }
    #tabbrowser-tabpanels {
        background: transparent !important;
    }
    #navigator-toolbox {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 100%;
        max-width: 100%;

        border-bottom: 1px solid var(--firefox-safari-style-title-border-color-active) !important;
        &:-moz-window-inactive {
            border-bottom-color: var(--firefox-safari-style-title-border-color-inactive) !important;
            filter: grayscale(100%);
        }
        
        #nav-bar {
            order: 1;
            flex: 1 1;
            padding-top: 7px !important;
            background: linear-gradient(to bottom, var(--firefox-safari-style-bar-background-color-top) 0%, var(--firefox-safari-style-bar-background-color-bottom) 100%) !important;
            &:-moz-window-inactive {
                background: var(--firefox-safari-style-bar-background-color-inactive) !important;
            }
            padding-top: 4px;
            padding-left: var(--firefox-safari-style-controls-width);
            #main-window[inFullscreen="true"] & {
                padding-left: 6px !important;
            }
            &, > hbox, > box {
                height: var(--firefox-safari-style-bar-height);
                min-height: var(--firefox-safari-style-bar-height);
                max-height: var(--firefox-safari-style-bar-height);
            }
            > toolbaritem {
                height: var(--firefox-safari-style-bar-height);
                min-height: var(--firefox-safari-style-bar-height);
                max-height: var(--firefox-safari-style-bar-height);
            }
            > toolbarpaletteitem, #nav-bar-customization-target toolbarpaletteitem {
                &[removable="false"] {
                    opacity: 0.7 !important;
                }
                &[id*="wrapper-customizableui-special-spring"] {
                    opacity: 0.3 !important;
                    margin-left: 3px !important;
                    margin-right: 3px !important;
                }
            }
            > toolbarbutton, #nav-bar-customization-target toolbarbutton, #PanelUI-menu-button {
                &.toolbarbutton-1 {
                    fill: var(--firefox-safari-style-button-color) !important;
                    fill-opacity: 1 !important;
                    .toolbarbutton-text {
                        padding-top: var(--toolbarbutton-vertical-text-padding) !important;
                        color: var(--firefox-safari-style-button-color) !important;
                    }
                }
                &#nav-bar-overflow-button, &#nav-bar-overflow-button:hover {
                    &, image {
                        background-color: transparent !important;
                    }
                    margin-left: 4px !important;
                    width: 16px !important;
                    max-width: 16px !important;
                    min-width: 16px !important;

                }
                &:not(#tabs-newtab-button):not(#urlbar-zoom-button):not(#nav-bar-overflow-button) {
                    
                    background-color: var(--firefox-safari-style-button-background-active) !important;
                    border: 1px solid var(--firefox-safari-style-button-border-color) !important;
                    @media
                    only screen and (   min--moz-device-pixel-ratio: 1.01),
                    only screen and (		min-device-pixel-ratio: 1.01),
                    only screen and (				min-resolution: 120dpi),
                    only screen and (				min-resolution: 1.3dppx) {
                        border-width: 0.5px !important;
                    }
                    border-top-color: var(--firefox-safari-style-button-border-color-top) !important;
                    border-bottom-color: var(--firefox-safari-style-button-border-color-bottom) !important;
                    
                    &:-moz-window-inactive {
                        background-color: var(--firefox-safari-style-button-background-inactive) !important;
                        border-color: var(--firefox-safari-style-button-border-color-inactive) !important;
                        border-top-color: var(--firefox-safari-style-button-border-color-inactive) !important;
                        border-bottom-color: var(--firefox-safari-style-button-border-color-inactive) !important;

                        &:-moz-lwtheme-brighttext {
                            background-color: var(--firefox-safari-style-button-background-active) !important;
                            border-color: var(--firefox-safari-style-button-border-color) !important;
                            border-top-color: var(--firefox-safari-style-button-border-color-top) !important;
                            border-bottom-color: var(--firefox-safari-style-button-border-color-bottom) !important;
                        }
                    }
                    border-radius: 5px !important;

                    margin-left: 4px !important;
                    &:not(#PanelUI-menu-button) {
                        margin-right: 0 !important;
                    }

                    height: var(--firefox-safari-style-button-height) !important;
                    min-height: var(--firefox-safari-style-button-height) !important;
                    max-height: var(--firefox-safari-style-button-height) !important;
                    width: var(--firefox-safari-style-button-width) !important;

                    &:not(#PanelUI-menu-button) {
                        image {
                            max-height: var(--firefox-safari-style-button-icon) !important;
                            max-width: var(--firefox-safari-style-button-icon) !important;
                        }
                    }
                    image {
                        &#fxa-avatar-image {
                            max-height: calc(var(--firefox-safari-style-button-icon) + 2px) !important;
                            max-width: calc(var(--firefox-safari-style-button-icon) + 2px) !important;
                        }
                        border-radius: 0 !important;
                        border: 0 !important;
                        background: transparent !important;
                        background-color: transparent !important;
                        padding: 0 !important;
                    }
                    stack {
                        padding: 0 !important;
                        &, &:hover {
                            background-color: transparent !important;
                        }
                    }
                    &#back-button, 
                    &#forward-button {
                        width: calc(var(--firefox-safari-style-button-height) + 2px) !important;
                        padding-inline-start: 2px !important;
                        padding-inline-end: 2px !important;
                        image {
                            list-style-image: url("chrome://global/skin/icons/arrow-left.svg");
                            max-height: calc(var(--firefox-safari-style-button-icon) + 2px) !important;
                            max-width: calc(var(--firefox-safari-style-button-icon) + 2px) !important;
                        }
                    }
                    &#forward-button image {
                        transform: rotate(180deg);
                    }
                }
            }
            > toolbarbutton, #nav-bar-customization-target toolbarbutton, #nav-bar-customization-target toolbarpaletteitem {
                &:not(#tabs-newtab-button):not(#urlbar-zoom-button):not(#nav-bar-overflow-button) {
                    &#back-button + #forward-button,
                    &#wrapper-back-button + #wrapper-forward-button #forward-button,
                    &#forward-button + #back-button,
                    &#wrapper-forward-button + #wrapper-back-button #back-button {
                        margin-left: -1px !important;
                        @media
                        only screen and (   min--moz-device-pixel-ratio: 1.01),
                        only screen and (		min-device-pixel-ratio: 1.01),
                        only screen and (				min-resolution: 120dpi),
                        only screen and (				min-resolution: 1.3dppx) {
                            margin-left: -0.5px !important;
                        }
                        &:-moz-lwtheme-brighttext {
                            margin-left: 1px !important;
                        }
                    }
                }
            }
            #nav-bar-customization-target {
                @media
                only screen and (   min--moz-device-pixel-ratio: 1.01),
                only screen and (		min-device-pixel-ratio: 1.01),
                only screen and (				min-resolution: 120dpi),
                only screen and (				min-resolution: 1.3dppx) {
                    margin-top: 0.5px !important;
                }
                #urlbar-container, #search-container {
                    padding: 0 !important;
                    #urlbar-input-container, &#search-container {
                        min-height: var(--firefox-safari-style-button-height) !important;
                        > * {
                            min-height: calc(var(--firefox-safari-style-button-height) - 2px) !important;
                        }
                        #pageActionSeparator {
                            visibility: visible !important;
                            margin-right: 6px !important;
                        }
                    }
                    #searchbar {
                        display: flex;
                        .searchbar-search-icon-overlay, .search-go-container {
                            display:  none !important;
                        }
                        .searchbar-textbox {
                            flex: 1 1;
                        }
                    }
                    #urlbar:not(.megabar)[focused="true"], 
                    #urlbar.megabar[focused="true"] > #urlbar-background, 
                    #searchbar:focus-within {
                        border-color: var(--firefox-safari-style-outline-color);
                        box-shadow: 0 0 0 1px var(--firefox-safari-style-outline-color) inset !important;
                    }
                    #urlbar:not([focused="true"]):not(:-moz-window-inactive), 
                    #urlbar:not([focused="true"]):not(:-moz-window-inactive) #urlbar-background,
                    #searchbar:not(:focus-within) {
                        border-color: var(--firefox-safari-style-button-border-color) !important;
                        border-top-color: var(--firefox-safari-style-button-border-color-top) !important;
                        border-bottom-color: var(--firefox-safari-style-button-border-color-bottom) !important;
                        box-shadow: none !important;
                    }
                    #urlbar, #searchbar {
                        &:-moz-window-inactive {
                            opacity: 0.45 !important;
                            &:-moz-lwtheme-brighttext {
                                opacity: 1 !important;
                            }
                            > * {
                                opacity: 1 !important;
                            }
                        }
                        padding-top: 0;
                        margin-left: 2px;
                        margin-right: 2px;
                        height: var(--firefox-safari-style-button-height) !important;
                        min-height: var(--firefox-safari-style-button-height) !important;
                        box-shadow: none !important;
                        border-width: 1px !important;
                        @media
                        only screen and (   min--moz-device-pixel-ratio: 1.01),
                        only screen and (		min-device-pixel-ratio: 1.01),
                        only screen and (				min-resolution: 120dpi),
                        only screen and (				min-resolution: 1.3dppx) {
                            border-width: 0.5px !important;
                        }
                        background-color: var(--firefox-safari-style-button-background-active) !important;
                        #main-window[privatebrowsingmode] & {
                            background-color: var(--firefox-safari-style-bar-background-color-private) !important;
                        }
                        &:-moz-window-inactive {
                            border-color: var(--firefox-safari-style-button-border-color-inactive) !important;
                            border-top-color: var(--firefox-safari-style-button-border-color-inactive) !important;
                            border-bottom-color: var(--firefox-safari-style-button-border-color-inactive) !important;
                            &:-moz-lwtheme-brighttext {
                                border-color: var(--firefox-safari-style-button-border-color) !important;
                                border-top-color: var(--firefox-safari-style-button-border-color-top) !important;
                                border-bottom-color: var(--firefox-safari-style-button-border-color-bottom) !important;
                                opacity: 0.35 !important;
                            }
                        }
                        &[breakout] {
                            top: 0 !important;
                            left: 0 !important;
                            &, * {
                                transition: none !important;
                            }
                            #urlbar-background {
                                background: none !important;
                                background-color: transparent !important;
                            }
                            &[breakout-extend] {
                                top: 0 !important;
                                left: 0 !important;
                                width: 100% !important;
                                height: var(--urlbar-height) !important;
                                #urlbar-background {
                                    opacity: 0 !important;
                                }
                                box-shadow: 0 0 0 2px var(--firefox-safari-style-outline-color) inset !important;
                                > #urlbar-input-container {
                                    height: var(--urlbar-height) !important;
                                    padding-block: 0 !important;
                                    padding-inline: 0 !important;
                                }
                                &[open] {
                                    top: -2px !important;
                                    left: -2px !important;
                                    width: calc(100% + 4px) !important;
                                    height: calc(var(--urlbar-height) + 4px) !important;
                                    &, > #urlbar-input-container {
                                        border-bottom: 0 !important;
                                        border-bottom-left-radius: 0 !important;
                                        border-bottom-right-radius: 0 !important;
                                    }
                                    > #urlbar-input-container {
                                        padding-block: 2px !important;
                                        padding-inline: 2px !important;
                                    }
                                }
                            }
                        }
                        .urlbarView.megabar {
                            position: absolute !important;
                            left: -2px !important;  
                            top: calc(var(--firefox-safari-style-tab-height) - 1px) !important;
                            margin-inline: 2px !important;
                            width: calc(100% - 0px) !important;
                            border-top: 0 !important;
                            border-right: 2px solid var(--firefox-safari-style-outline-color) !important;
                            border-bottom: 2px solid var(--firefox-safari-style-outline-color) !important;
                            border-left: 2px solid var(--firefox-safari-style-outline-color) !important;
                            background-color: var(--firefox-safari-style-button-background-active) !important;
                            #main-window[privatebrowsingmode] & {
                                border-right-color: #182a98 !important;
                                border-bottom-color: #182a98 !important;
                                border-left-color: #182a98 !important;
                                background-color: var(--firefox-safari-style-bar-background-color-private) !important;
                            }
                            border-bottom-left-radius: 5px !important;
                            border-bottom-right-radius: 5px !important;
                            > .urlbarView-body-outer,
                            > .search-one-offs {
                                #main-window[privatebrowsingmode] & {
                                    background-color: var(--firefox-safari-style-bar-background-color-private) !important;
                                }
                            }
                            > .urlbarView-body-outer {
                                .urlbarView-body-inner {
                                    border-top: 0 !important;
                                    * {
                                        border-radius: 0 !important;
                                    }
                                    .urlbarView-results {
                                        > :first-child {
                                            margin-top: 2px;
                                        }
                                        .urlbarView-row {
                                            padding: 0 !important;
                                        }
                                    }
                                }
                            }
                            > .search-one-offs {
                                padding-top: 0 !important;
                                padding-bottom: 0 !important;
                                .search-panel-one-offs-header {
                                    display: none !important;
                                }
                            }
                        }
                        &, #urlbar-input-container {
                            border-radius: 5px !important;
                        }
                        &, html|input#urlbar-input, html|input#urlbar-input *, #searchbar-textbox, #searchbar-textbox * {
                            font-size: 13px !important;
                            color: var(--firefox-safari-style-button-color) !important;
                            #main-window[privatebrowsingmode] & {
                                color: white !important;
                            }
                        }
                        html|input#urlbar-input {
                            padding-left: 2px !important;
                        }
                        &[focused="true"][usertyping="true"] {
                            #identity-box, .urlbar-input-box {
                                position: static !important;
                                margin-top: -2px !important;
                                margin-bottom: -11px !important;
                                padding-top: 4px !important;
                            }
                        }
                        #identity-box[pageproxystate="valid"].extensionPage > #identity-icon {
                            transform: translateY(-1px);
                        }
                        image:not(.urlbar-history-dropmarker):not(#tracking-protection-icon):not(#tracking-protection-icon-animatable-image):not(#userContext-indicator):not(.button-icon) {
                            max-height: 12px !important;
                            max-width: 12px !important;
                            min-height: 12px !important;
                            min-width: 12px !important;
                            position: relative !important;
                            top: 1px !important;
                        }
                        image:not(#userContext-indicator),
                        #identity-box, 
                        #tracking-protection-icon-container,
                        .urlbar-icon {
                            fill: var(--firefox-safari-style-button-color) !important;
                            fill-opacity: 1 !important;
                        }
                        #main-window[privatebrowsingmode] & image {
                            fill: white !important;
                            fill-opacity: 1 !important;
                        }
                        #searchbar-search-button {
                            margin-right: 3px;
                        }
                    }
                }
                #back-button,
                #forward-button,
                #reload-button,
                #stop-button,
                #home-button,
                #nav-bar-overflow-button,
                .toolbarbutton-1 {
                    &[disabled="true"] {
                        opacity: 1 !important;
                        image {
                            opacity: 0.5 !important;
                        }
                    }
                    &:-moz-window-inactive {
                        opacity: 0.5 !important; 
                        &:-moz-lwtheme-brighttext {
                            opacity: 0.35 !important; 
                        }
                    }
                }
                #downloads-button {
                    &, &:hover, .toolbarbutton-badge-stack, .toolbarbutton-badge-stack:hover {
                        background-color: transparent !important;
                    }
                    .toolbarbutton-badge-stack {
                        padding: 0 !important;
                        transform: scale(0.75);
                        #downloads-indicator-progress-outer {
                            transform: scale(1.1) translateY(1px);
                            @media
                            only screen and (   min--moz-device-pixel-ratio: 1.01),
                            only screen and (		min-device-pixel-ratio: 1.01),
                            only screen and (				min-resolution: 120dpi),
                            only screen and (				min-resolution: 1.3dppx) {
                                transform: scale(1.1) translateY(0.5px);
                            }
                        }
                    }
                }
                .webextension-browser-action .toolbarbutton-badge {
                    transform: scale(0.8) translateY(1px);
                }
                :not(.urlbar-icon-wrapper) > .urlbar-icon:not([disabled]):hover, .urlbar-icon-wrapper:not([disabled]):hover {
                    background-color: transparent !important;
                }
                #pageActionButton {
                    list-style-image: none !important;
                    background: url("chrome://global/skin/icons/more.svg") 50% 50% / 12px 12px no-repeat;
                    margin-right: 8px;
                }
                #pocket-button {
                    list-style-image: none !important;
                    background: url("chrome://browser/skin/pocket-outline.svg") 50% 50% / 12px 12px no-repeat;
                    margin-right: 8px;
                }
                #pocket-button-animatable-box {
                    display: none !important;
                }
                #star-button {
                    list-style-image: none !important;
                    background: url("chrome://browser/skin/bookmark-hollow.svg") 50% 50% / 12px 12px no-repeat;
                    margin-right: 8px;
                    margin-top: -2px !important;
                }
                #star-button-animatable-box {
                    display: none !important;
                }
                #urlbar-zoom-button, #userContext-icons, #contextual-feature-recommendation {
                    &, .toolbarbutton-text, #userContext-label {
                        border-radius: 3px !important;
                        border-width: 0 !important;
                        background-color: var(--firefox-safari-style-attention-color) !important;
                        border-color: transparent !important;
                        padding: 1px 2px 1px 2px !important;
                        font-size: 9px !important;
                        margin-top: -1px !important;
                        color: #fff !important;
                        animation: none !important;
                    }
                    &:not([hidden="true"]) + #pageActionSeparator {
                        margin-left: 0 !important;
                    }
                }
                #userContext-icons {
                    &, #userContext-label {
                        background-color: var(--identity-tab-color) !important;
                    }
                    #userContext-indicator {
                        fill: #fff !important;
                        min-width: 10px !important;
                        width: 10px !important;
                        height: 10px !important;
                        min-height: 10px !important;
                        margin-left: 0 !important;
                        margin-right: 2px !important;
                    }
                }
                #reader-mode-button {
                    list-style-image: none !important;
                    background: url(chrome://browser/skin/readerMode.svg) 50% 50% / 12px 12px no-repeat;
                }
                :not(.urlbar-icon-wrapper) > .urlbar-icon:not([disabled])[open], 
                :not(.urlbar-icon-wrapper) > .urlbar-icon:not([disabled]):hover:active, 
                .urlbar-icon-wrapper:not([disabled])[open], 
                .urlbar-icon-wrapper:not([disabled]):hover:active {
                    background-color: transparent !important;
                }
            }
            #PanelUI-button {
                margin-left: 0 !important;
                margin-right: 7px !important;
                border-width: 0 !important;
                .toolbarbutton-badge {
                    margin-top: -8px !important;
                    margin-left: 3px !important;
                }
            }
            #PanelUI-menu-button {
                --firefox-safari-style-menu-icon-size: 12px; 
                .toolbarbutton-badge-stack {
                    padding: 0 !important;
                    @media
                    only screen and (   min--moz-device-pixel-ratio: 1.01),
                    only screen and (		min-device-pixel-ratio: 1.01),
                    only screen and (				min-resolution: 120dpi),
                    only screen and (				min-resolution: 1.3dppx) {
                        transform: scale(1.1);
                    }
                }
                .toolbarbutton-icon {
                    width: var(--firefox-safari-style-menu-icon-size) !important;
                    min-width: var(--firefox-safari-style-menu-icon-size) !important;
                    max-width: var(--firefox-safari-style-menu-icon-size) !important;
                    height: var(--firefox-safari-style-menu-icon-size) !important;
                    min-height: var(--firefox-safari-style-menu-icon-size) !important;
                    max-height: var(--firefox-safari-style-menu-icon-size) !important;
                    /*list-style-image: url("chrome://global/skin/icons/more.svg");*/
                }
            }
            #PanelUI-button,
            #PanelUI-menu-button {
                margin-left: 0 !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
                height: var(--firefox-safari-style-button-height);
                max-height: var(--firefox-safari-style-button-height);
                min-height: var(--firefox-safari-style-button-height);
                &, &:hover, .toolbarbutton-badge-stack, .toolbarbutton-badge-stack:hover {
                    background-color: transparent !important;
                }
            }
            #fxa-toolbar-menu-button {
                &, &:hover, .toolbarbutton-badge-stack, .toolbarbutton-badge-stack:hover {
                    background-color: transparent !important;
                }
                .toolbarbutton-badge-stack {
                    padding-top: 4px !important;
                    padding-bottom: 4px !important;
                }
            }
            @if $firefox-safari-style-grayscale-extension-buttons-in-toolbar == true {
                toolbarpaletteitem, toolbarbutton {
                    &.webextension-browser-action .toolbarbutton-icon {
                        filter: grayscale(100%);
                    }
                }
            }
            > panel {
                margin-top: 3px !important;
            }
        }
        #PersonalToolbar {
            order: 2;
            flex: 1 1;
            
            height: var(--firefox-safari-style-tab-height) !important;
            min-height: var(--firefox-safari-style-tab-height) !important;
            max-height: var(--firefox-safari-style-tab-height) !important;

            &[collapsed="true"] {
                display: none !important;
            }

            #PlacesToolbarItems {
                margin-top: 3px !important; 
                &,  > * {
                    max-height: calc(var(--firefox-safari-style-tab-height) - 7px) !important;
                }
            }
            #PlacesChevron {
                transform: translateX(5px) translateY(1px);
                border-radius: 0 !important;
                .toolbarbutton-icon { 
                    width: var(--firefox-safari-style-button-icon) !important;
                    height: var(--firefox-safari-style-button-icon) !important;
                    fill: var(--firefox-safari-style-button-color) !important;
                    margin-right: 1px !important;
                    &, &:hover {
                        background-color: transparent !important;
                    }
                }
                &, &:hover {
                    background-color: transparent !important;
                }
            }
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            
            background: linear-gradient(to bottom, var(--firefox-safari-style-bar-background-color-bottom) 0%, var(--firefox-safari-style-bar-background-color-bottom) 100%) !important;
            &:-moz-window-inactive {
                background: var(--firefox-safari-style-tab-background-color-inactive) !important;
            }
            border-top: 1px solid var(--firefox-safari-style-bar-border-color-active) !important;
            &:-moz-window-inactive {
                border-top-color: var(--firefox-safari-style-bar-border-color-inactive) !important;
            }

            #personal-bookmarks {
                #PlacesToolbarItems {
                    .bookmark-item {
                        .toolbarbutton-icon {
                            display: none !important;
                        }
                        .toolbarbutton-icon[type="menu"] + .toolbarbutton-text {
                            background: url("chrome://global/skin/icons/arrow-dropdown-16.svg") 100% 50% / 9px 9px no-repeat;
                            padding-right: 12px !important;
                        }
                    }
                }
            }

            > toolbaritem:not(#personal-bookmarks) {
                toolbarbutton {
                    margin-top: 3px !important;
                    height: 16px !important;
                    max-height: 16px !important;
                    & image {
                        transform: scale(0.9);
                    }
                }
            }
        }
        #titlebar {
            order: 3;
            flex: 1 1;
            height: var(--firefox-safari-style-tab-height) !important;
            min-height: var(--firefox-safari-style-tab-height) !important;
            max-height: var(--firefox-safari-style-tab-height) !important;
            /* Show alternate window controls */
            > #toolbar-menubar {
                visibility: visible !important;
                #menubar-items, spacer {
                    display: none !important ;
                }
                .titlebar-buttonbox-container {
                    display: block !important;
                    position: absolute;
                    top: 0;
                    min-height: 27px;
                    > .titlebar-buttonbox {
                        margin-top: 11px;
                    }
                }
            }
            #TabsToolbar {
                display: flex;
                flex-direction: column-reverse;
                height: var(--firefox-safari-style-tab-height);
                
                /* Hide window controls */
                .titlebar-buttonbox-container, #menubar-items {
                    display: none !important ;
                }
                .toolbar-items {
                    background: linear-gradient(to bottom, var(--firefox-safari-style-tab-background-color-top) 0%, var(--firefox-safari-style-tab-background-color-bottom) 100%) !important;
                    &:-moz-window-inactive {
                        background: var(--firefox-safari-style-tab-background-color-inactive) !important;
                    }
                    border-top: 1px solid var(--firefox-safari-style-tab-border-color-active);
                    &:-moz-window-inactive {
                        border-top-color: var(--firefox-safari-style-tab-border-color-inactive) !important;
                    }
                    &, #tabbrowser-tabs, tab.tabbrowser-tab, tab.tabbrowser-tab::after, tab.tabbrowser-tab stack, tab.tabbrowser-tab .tab-content {
                        height: var(--firefox-safari-style-tab-height) !important;
                        min-height: var(--firefox-safari-style-tab-height) !important;
                        max-height: var(--firefox-safari-style-tab-height) !important;
                    }
                    #tabbrowser-tabs {
                        &, &[movingtab] {
                            margin-top: 0 !important;
                            margin-bottom: 0 !important;
                            padding-top: 0 !important;
                            padding-bottom: 0 !important;
                        }
                    }
                    overflow: hidden;
                    &, > hbox {
                        width: 100% !important;
                    }
                    .tab-line {
                        display: none;
                    }
                }
                .tabbrowser-tab {
                    &, .tab-stack {
                        display: flex;
                    }
                    > .tab-stack {
                        flex-direction: column;
                        max-width: 100%;
                    }
                    .tab-label-container[pinned] {
                        display: none !important;
                    }
                    &:not([fadein="true"]) {
                        display: none;
                    }
                    .tab-background {
                        width: 100% !important;
                        border: 0 !important;
                        order: 2;
                        height: 2px;
                        margin-top: -3px;
                        background: transparent !important;
                        *:not(.tab-bottom-line) {
                            display: none;
                        }
                        .tab-bottom-line {
                            background: var(--identity-tab-color) !important;
                        }
                    }
                    &[selected="true"] {
                        background: linear-gradient(to bottom, var(--firefox-safari-style-tab-background-color-selected-top) 0%, var(--firefox-safari-style-tab-background-color-selected-bottom) 100%) !important;
                        &:-moz-window-inactive {
                            background: var(--firefox-safari-style-tab-background-color-inactive) !important;
                        }
                    }
                    & + tab.tabbrowser-tab {
                        border-left: 1px solid var(--firefox-safari-style-tab-border-color-active) !important;
                    }
                    & + tab.tabbrowser-tab:-moz-window-inactive {
                        border-left: 1px solid var(--firefox-safari-style-tab-border-color-inactive) !important;
                    }
                    .tab-content {
                        overflow: hidden;
                        &:-moz-window-inactive {
                            opacity: 0.55 !important;
                        }
                        display: flex;
                        flex-direction: row;
                        position: relative;
                        .tab-throbber {
                            filter: grayscale(100%);
                        }
                        .tab-throbber,
                        .tab-icon-image,
                        .tab-close-button {
                            order: 1;
                        }
                        .tab-throbber,
                        .tab-icon-image,
                        .tab-close-button,
                        .tab-icon-sound {
                            fill: var(--firefox-safari-style-button-color) !important;
                        }
                        .tab-throbber:not([pinned]),
                        .tab-icon-image:not([pinned]),
                        .tab-icon-image:not([pinned]) ~ .tab-close-button {
                            margin-left: -3px !important;
                            margin-right: 6px !important;
                            box-sizing: content-box;
                        }
                        .tab-throbber {
                            transform: translateY(-1px);
                        }
                        .tab-icon-image {
                            margin-top: -1px !important;
                            border-radius: 2px;
                            &:not([src]) {
                                &:not([busy]) {
                                    display: block;
                                }
                                list-style-image: none !important;
                            }
                        }
                        .tab-throbber,
                        .tab-icon-image {
                            min-width: 16px;
                        }
                        .tab-close-button {
                            display: none;
                            margin-top: -1px !important;
                            fill: var(--firefox-safari-style-tab-color) !important;
                            padding: 1px;
                            width: 14px;
                            min-width: 14px;
                            height: 14px; 
                        }
                        .tab-sharing-icon-overlay,
                        .tab-icon-overlay {
                            display: none !important;
                        }
                        .tab-label-container {
                            order: 2;
                            flex: 1 1 100%;
                            margin-top: -1px !important;
                            text-align: center !important;
                            display: flex;
                            max-width: 100%;
                            .tab-label {
                                flex: 1 1;
                                margin-top: 0 !important;
                                color: var(--firefox-safari-style-tab-color) !important;
                            }
                        }
                        .tab-icon-sound {
                            order: 3;
                            width: 14px !important;
                            height: 14px !important; 
                            margin-right: -3px !important;
                            margin-top: -1px !important;
                        }
                        .tab-icon-sound[pictureinpicture]:not(:hover), 
                        .tab-icon-sound[soundplaying]:not(:hover), 
                        .tab-icon-sound[muted]:not(:hover), 
                        .tab-icon-sound[activemedia-blocked]:not(:hover) {
                            opacity: 1 !important;
                        }
                        &:not([pinned]):hover .tab-close-button {
                            display: block !important;
                            opacity: 0.8 !important;
                        }
                        &:not([pinned]):hover .tab-icon-image,
                        &:not([pinned]):hover .tab-icon-image:not([src]),
                        &:not([pinned]):hover .tab-throbber {
                            display: none !important;
                        }
                        .tab-icon-image:not([pinned]) ~ .tab-icon-sound:not([soundplaying]):not([muted]):not([activemedia-blocked]):not([pictureinpicture]), 
                        .tab-icon-image:not([pinned]) ~ .tab-icon-sound,
                        .tab-icon-image:not([busy]):not([pinned]):not([src]) ~ .tab-close-button {
                            display: block !important;
                            opacity: 0;
                        }
                        @if $firefox-safari-style-show-favicons-in-tabs == false {
                            .tab-icon-image:not([busy]):not([pinned]) ~ .tab-close-button {
                                display: block !important;
                                opacity: 0;
                            }
                            .tab-icon-image:not([pinned]) {
                                display: none !important;
                            }
                        }
                        .tab-label {
                            padding-right: 9px !important;
                        }
                        .tab-icon-image:-moz-window-inactive {
                            opacity: 0.5 !important;
                        }
                        @if $firefox-safari-style-grayscale-favicons-in-tabs == true {
                            .tab-icon-image {
                                filter: grayscale(100%);
                            }
                        }
                    }
                    &::after {
                        border-color: var(--firefox-safari-style-tab-border-color-active) !important;
                        display: none !important;
                    }
                    &[pinned] {
                        width: 38px;
                        max-width: 38px;
                        min-width: 38px;
                        overflow: hidden !important;
                        .tab-throbber,
                        .tab-icon-image {
                            position: relative;
                            left: -1px;
                        }
                        & + .tabbrowser-tab[pinned] {
                            width: 39px;
                            max-width: 39px;
                            min-width: 39px;
                        }
                    }
                    &:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), 
                    > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
                        background: none !important;
                    }
                    &:not([selected="true"]):not(:-moz-window-inactive):hover {
                        background-color: var(--firefox-safari-style-tab-background-color-hover) !important;
                    }
                }
                #tabs-newtab-button, #new-tab-button {
                    height: calc(var(--firefox-safari-style-tab-height) - 1px);
                    opacity: 1 !important;
                    border-left: 1px solid var(--firefox-safari-style-tab-border-color-active) !important;
                    margin-left: auto !important;
                    min-width: 25px !important;
                    max-width: 25px !important;
                    &:-moz-window-inactive {
                        border-left: 1px solid var(--firefox-safari-style-tab-border-color-inactive) !important;
                    }
                    image {
                        transform: translateX(-1px);
                        opacity: 0.5 !important;
                        &:-moz-lwtheme-brighttext {
                            opacity: 1 !important;
                        }
                        &:-moz-window-inactive {
                            opacity: 0.3 !important;
                            &:-moz-lwtheme-brighttext {
                                opacity: 1 !important;
                            }
                        }
                    }
                    &:hover {
                        background-color: var(--firefox-safari-style-tab-background-color-hover) !important;
                    }
                    &:hover:-moz-window-inactive {
                        background-color: transparent !important;
                    }
                    .toolbarbutton-icon { 
                        width: 21px !important;
                        height: 21px !important;
                        fill: var(--firefox-safari-style-tab-color) !important;
                        &, &:hover {
                            background-color: transparent !important;
                        }
                    }
                }
                .scrollbutton-up,
                .arrowscrollbox-overflow-start-indicator,
                .arrowscrollbox-overflow-end-indicator,
                .scrollbutton-down,
                #alltabs-button,
                #wrapper-alltabs-button {
                    display: none !important;
                    fill: var(--firefox-safari-style-button-color) !important;
                }
                .titlebar-spacer {
                    display: none;
                }
                .tabbrowser-tab:not([pinned]) {
                    max-width: 10000px !important;
                }
                .arrowscrollbox-scrollbox, .tabbrowser-tab, .tab-content  {
                    display: flex;
                    align-items: center;
                }
                .tabbrowser-tab:not([pinned]), .tab-stack, .tab-content, .tab-label-container  {
                    flex: 1 1;
                }
                .tab-loading-burst,
                .private-browsing-indicator {
                    display: none;
                }
            }
        }
    }
    #searchbar,
    #search-container,
    #wrapper-search-container,
    #extension-icon[tooltiptext*="NelliTab"], 
    #identity-icon[tooltiptext*="NelliTab"] ~ #identity-icon-labels, 
    #identity-icon-label[value*="NelliTab"] { 
        display: none !important;
    }
    #customization-panelWrapper {
        transform: translateX(12px);
    }
    #PersonalToolbar .toolbarbutton-1:not([disabled="true"]):not([checked]):not([open]):not(:active):hover, 
    .tabbrowser-arrowscrollbox:not([scrolledtostart="true"])::part(scrollbutton-up):hover, 
    .tabbrowser-arrowscrollbox:not([scrolledtoend="true"])::part(scrollbutton-down):hover, 
    .findbar-button:not(:-moz-any([checked="true"], [disabled="true"])):hover, 
    toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]):not(#PanelUI-menu-button), 
    toolbar .toolbarbutton-1:not([disabled="true"]):not([checked]):not([open]):not(:active):not(#PanelUI-menu-button):hover > .toolbarbutton-icon, 
    toolbar .toolbarbutton-1:not([disabled="true"]):not([checked]):not([open]):not(:active):not(#PanelUI-menu-button):hover > .toolbarbutton-text, 
    toolbar .toolbarbutton-1:not([disabled="true"]):not([checked]):not([open]):not(:active):not(#PanelUI-menu-button):hover > .toolbarbutton-badge-stack {
        color: var(--firefox-safari-style-tab-hover-color) !important;
        background-color: var(--firefox-safari-style-tab-hover-background) !important;
    }
    .scrollbutton-up,
    .scrollbutton-down {
        &, image { 
            opacity: 1 !important;
        }
        image {
            fill: var(--firefox-safari-style-button-color) !important;
            border-color: var(--firefox-safari-style-button-color) !important;
            max-width: 12px;
            opacity: 1 !important;
            &:-moz-window-inactive {
                opacity: 0.5 !important;
            }
        }
        &[disabled="true"] image {
            opacity: 0.4 !important;
        }
    }
    .scrollbutton-up {
        border-left: 1px solid var(--firefox-safari-style-tab-border-color-active) !important;
        border-right: 1px solid var(--firefox-safari-style-tab-border-color-active) !important;
        &:-moz-window-inactive {
            border-left-color: var(--firefox-safari-style-tab-border-color-inactive) !important;
            border-right-color: var(--firefox-safari-style-tab-border-color-inactive) !important;
        }
    }
    .scrollbutton-down {
        border-right: 1px solid var(--firefox-safari-style-tab-border-color-active) !important;
        &:-moz-window-inactive {
            border-right-color: var(--firefox-safari-style-tab-border-color-inactive) !important;
        }
    }
    .scrollbutton-up ~ spacer {
        opacity: 0 !important;
    }
}